<template>
  <div class="main-box">
    <div class="table-box">
      <ProTable
        ref="proTable"
        title="发票列表"
        highlight-current-row
        :columns="columns"
        :request-api="getBillList"
        :init-param="Object.assign(initParams)"
      >
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <el-button type="primary" :icon="CirclePlus" @click="openAddDrawer('新增')">新增发票</el-button>
          <el-button type="primary" :icon="Upload" plain @click="batchAdd">批量添加发票</el-button>
          <el-button type="primary" :icon="Download" plain @click="downloadFile">导出发票数据</el-button>
        </template>
        <!-- 表格操作 -->
        <template #operation="scope">
          <!-- <el-button v-if="scope.row.billStatus === 1" type="primary" link :icon="View" @click="openDrawer1('查看', scope.row)"
            >查看</el-button
          > -->
          <el-button v-if="scope.row.billStatus === 0" type="primary" link :icon="EditPen" @click="openDrawer2(scope.row)"
            >领用</el-button
          >
          <el-button v-if="scope.row.billStatus === 1" type="primary" link :icon="Delete" @click="deleteAccount(scope.row)"
            >作废</el-button
          >
          <el-button v-if="scope.row.billStatus === 0" type="primary" link :icon="Delete" @click="deleteAccount(scope.row)"
            >作废</el-button
          >
        </template>
      </ProTable>
      <BillDrawer ref="drawerRef" />
      <BillAddDrawer ref="drawerAddRef" />
      <TaskOrderDrawer ref="drawerTORef" />
      <ImportExcel ref="dialogRef" />
    </div>
  </div>
</template>
<script setup lang="tsx" name="useSelectFilter">
import { ref, onMounted } from "vue";
import { Money } from "@/api/interface";
import { ElMessageBox } from "element-plus";
import { useHandleData } from "@/hooks/useHandleData";
import { useDownload } from "@/hooks/useDownload";
import { billStatus } from "@/utils/serviceDict";
import { useUserStore } from "@/stores/modules/user";
import ProTable from "@/components/ProTable/index.vue";
import ImportExcel from "@/components/ImportExcel/index.vue";
import BillDrawer from "./components/BillDrawer.vue";
import BillAddDrawer from "./components/BillAddDrawer.vue";
import TaskOrderDrawer from "./components/TaskOrderDrawer.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { CirclePlus, Delete, Download, Upload, EditPen } from "@element-plus/icons-vue";
import { BatchAddBill, addBill, getBillList, stopBill } from "@/api/modules/money";
import { exportBillInfo } from "@/api/modules/money";

// 获取 ProTable 元素，调用其获取刷新数据方法（还能获取到当前查询参数，方便导出携带参数）
const proTable = ref<ProTableInstance>();

// 表格配置项
const columns: ColumnProps[] = [
  { prop: "billId", label: "发票号", width: 100, sortable: true, search: { el: "input" } },
  { prop: "billStatus", label: "发票状态", width: 120, sortable: true, tag: true, enum: billStatus },
  { prop: "billRemark", label: "发票备注", width: 150 },
  { prop: "taskOrderInfo.substationId", label: "所属分站", width: 150, search: { el: "input" } },
  { prop: "taskOrderInfo.orderInfo.totalAmount", label: "订单金额", width: 150 },
  { prop: "taskOrderInfo.customInfo.customerName", label: "购买方", width: 150, search: { el: "input" } },
  // { prop: "userRole", label: "身份", width: 120, sortable: true, tag: true, enum: userRole },
  // {
  //   prop: "userStatus",
  //   label: "用户状态",
  //   enum: userStatus,
  //   fieldNames: { label: "userLabel", value: "userStatus" },
  //   render: scope => {
  //     return (
  //       <>
  //         {
  //           <el-switch
  //             model-value={scope.row.userStatus}
  //             active-text={scope.row.userStatus ? "启用" : "禁用"}
  //             active-value={1}
  //             inactive-value={0}
  //             onClick={() => changeStatus(scope.row)}
  //           />
  //         }
  //       </>
  //     );
  //   }
  // },
  { prop: "createTime", label: "创建时间", width: 180, sortable: true },
  { prop: "operation", label: "操作", fixed: "right" }
];

// 获取用户角色字典
onMounted(() => {});

const userStore = useUserStore();
// 默认显示身份为8，本分站id
const initParams = ref({ userRole: 8, departmentId: userStore.userInfo.departmentId });

// 删除用户信息
const deleteAccount = async (params: Money.ResBillList) => {
  const textToCopy = [params.billId] ?? ""; // 使用空字符串作为默认值
  console.log("赋值前" + textToCopy);
  await useHandleData(stopBill, { billId: params.billId }, `作废票号为【${params.billId}】的发票`);
  proTable.value?.getTableList();
};

// 导出用户列表
const downloadFile = async () => {
  ElMessageBox.confirm("确认导出发票数据?", "温馨提示", { type: "warning" }).then(() =>
    useDownload(exportBillInfo, "用户列表", proTable.value?.searchParam)
  );
};

// 批量添加用户
const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null);
const batchAdd = () => {
  const params = {
    title: "发票",
    tempApi: exportBillInfo,
    importApi: BatchAddBill,
    getTableList: proTable.value?.getTableList
  };
  dialogRef.value?.acceptParams(params);
};

// 打开 drawer(新增)
const drawerAddRef = ref<InstanceType<typeof BillAddDrawer> | null>(null);
const openAddDrawer = (title: string) => {
  const params = {
    title,
    isView: false,
    api: addBill,
    getTableList: proTable.value?.getTableList
  };
  drawerAddRef.value?.acceptParams(params);
};

// const drawerTORef = ref<InstanceType<typeof TaskOrderDrawer> | null>(null);
// const openDrawer2 = (title: string) => {
//   const params = {
//     title,
//     isView: false,
//     api: addBill,
//     getTableList: proTable.value?.getTableList
//   };
//   drawerTORef.value?.acceptParams(params);
// };

const drawerTORef = ref<InstanceType<typeof TaskOrderDrawer> | null>(null);
const openDrawer2 = (row: Money.ResBillList) => {
  console.log(1324234234234231);
  drawerTORef.value?.open(row);
};

// const getTaskOrder = (row: Substation.ResTaskOrderList) => {
//   if (drawerProps.value.row.outboundWarehouseId) {
//     drawerProps.value.row.outboundWarehouseId = row.warehouseId;
//     //drawerProps.value.row.outboundWarehouseId = row.warehouseName;
//   }
// };
</script>
